<template>
  <!-- <div v-drag class="w">hello vue!</div> -->
  <!---如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：--->
  <div id="app">
    <div id="container" style="width: 800px;height:500px;"></div>
  </div>
<!-- 使用keepAlive后生命周期发生了哪些变化 -->
   
</template>

<script>
// export default {
//   data() {
//     return {};
//   },
//   directives: {
//     drag: {
//       inserted(el) {
//         el.onmousedown = (e) => {
//           let x = e.clientX - el.offsetLeft;
//           let y = e.clientY - el.offsetTop;
//           document.onmousemove = (e) => {
//             let xx = e.clientX - x + "px";
//             let yy = e.clientY - y + "px";
//             el.style.left = xx;
//             el.style.top = yy;
//           };
//           el.onmouseup = (e) => {
//             document.onmousemove = null;
//           };
//         };
//       },
//     },
//     mounted() {},

//     methods: {},
//   },
// };
 // import * as echarts from 'echarts';
    const echarts = require('echarts')

    export default {
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('container'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '学生分数统计图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['张三', '李四', '王五', '赵六', '燕七']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '张三',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }, {
                    name: '李四',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }, {
                    name: '王五',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                }, {
                    name: '赵六',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                }, {
                    name: '燕七',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [20, 32, 1, 34, 90, 100, 120]
                }]
            });
        }
    }
</script>

<style lang="scss" scoped>
// .w {
//   width: 120px;
//   height: 120px;
//   background-color: skyblue;
//   position: absolute;
// }
</style>